<script setup>
import { Edit,Delete } from '@element-plus/icons-vue';
import {artGetListService,artDeleteService} from '@/api/article' //导入获取文章
import { ref } from 'vue'
import { ElMessage ,ElMessageBox} from 'element-plus';
import {listHouse,filterDanyuan,addHouses,updateHouse,deleteHouse} from '@/api/gongs.js'
import {useKuYiStore} from '@/stores'


const HouseList = ref([]) //房屋信息列表
const formModel=ref([])  //弹出框的数据 准备提交的数据
const total=ref(0) //总条数
const loading=ref(false) //loading状态
const dialogVisible=ref(false)// Dialog弹出框的状态
const isDialog=ref(false)// 管理弹出框是否是添加和编辑的
const formRef=ref(null)    
const useStore = useKuYiStore() //引入pinia仓库
const louyumodels=ref([])

// 表单规则
const rules={
    building: [
        { required: true, message: '请选择楼宇名称', trigger: 'change' }
    ],
    unit: [
        { required: true, message: '请选择单元名称', trigger: 'change' }
    ],
    floor: [
        { required: true, message: '请输入楼层', trigger: 'blur' },
        { type: 'number', min: 1, max: 50, message: '楼层必须在1到50之间', trigger: 'blur' }
    ],
    house_number: [
        { required: true, message: '请输入房号', trigger: 'blur' },
        { pattern: /^\d+-\d+-\d+$/, message: '房号格式不正确，应为“楼栋-单元-房号”格式，例如“1-1-101”', trigger: 'change' }
    ],
    owner_name: [
        { required: true, message: '请输入业主姓名', trigger: 'blur' },
        { pattern: /^[\u4e00-\u9fa5_a-zA-Z]+$/, message: '业主姓名只能包含汉字和字母', trigger: 'blur' }
    ],
    contact_info: [
        { required: true, message: '请输入联系方式', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号，例如“13912345678”', trigger: 'blur' }
    ],
    area: [
        { required: true, message: '请输入面积', trigger: 'blur' },
        { pattern: /^\d+(\.\d{1,2})?$/, message: '面积格式不正确', trigger: 'blur' }
    ],
    remarks: [
        { required: false, message: '请输入备注', trigger: 'blur' } // 备注项是可选的
    ]
}

// 确定表单
const onSubmit=async()=>{
    await formRef.value.validate() //预校验

    // 根据 isDialog 的值判断是添加还是编辑
    if (!isDialog.value) {
        // 添加逻辑
        // 提交 formModel.value 数据
            await addHouses(formModel.value)
            ElMessage.success('添加成功！')
            getArticleList()
    } else {
        // 编辑逻辑
        // 提交 formModel.value 数据
        await updateHouse(formModel.value)
        ElMessage.success('房屋信息更改成功！')
        getArticleList()
    }
  dialogVisible.value = false; // 关闭对话框
}

// 定期请求参数对象
const params=ref({
    action: 'list',
    page: 1, //第几页的数据
    perPage: 5 //表示每页的数据条数
})

// 根据后端代码渲染单元管理数据
const getArticleList = async () =>{
    try{
        loading.value = true //开启loading效果
        const res = await listHouse(params.value)
        HouseList.value=res.data.data
        total.value=Number(res.data.total)
        loading.value = false //关闭loading效果
    }catch(err){
        console.log(err);
    }
}
getArticleList()

// 处理分页逻辑
const handleSizeChange=(size)=>{
    console.log('当前每页条数',size);
    // 如果每页条数发生变化 就要把当前跳到第一页；并且每页条数设置成要变成的条数
    params.value.page=1
    params.value.perPage=size
    // 重新渲染
    getArticleList()
}

// 分页
const handleCurrentChange=(page)=>{
//     console.log('页码变化了',page);
//     params.value.page=page
//    // 重新渲染
//    getArticleList()
    params.value.page = parseInt(page, 10); // 确保转换为整数
    getArticleList(); // 重新加载数据
}

// 搜索逻辑=>按照最新的搜索条件 ，重新检索 ，从第一页开始展示 // 点击添加单元
const onAddAritcle=()=>{
    // 管理弹出框是否是添加和编辑的
    isDialog.value=false
    // 打开弹出框
    dialogVisible.value=true
    // 这是添加房屋要进行清空数据原
    formModel.value=[]
}

// 编辑楼宇 这里要根据后台是不是有数据如果有数据就是修改
const onEditArticle=(row)=>{
    // 管理弹出框是否是添加和编辑的
    isDialog.value=true
    dialogVisible.value=true
    formModel.value = { ...row,floor:Number(row.floor) }; // 设置表单数据为当前行数据的副本
}

// 删除单元的数据
const onDeleteArticle= async (row)=>{
    // 删除逻辑
    ElMessageBox.confirm( '您是否要删除该楼宇?','提示！',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',})
    .then(async() => {
        await deleteHouse(row.id)
        ElMessage.success('删除成功！')
        getArticleList()
    })
}

// 监听子组件 (添加或者编辑成功的回调)
// const onsuccess=(type)=>{
//     if(type==='add'){
//         // 渲染最后一页 总条数 ÷ 每页页码条数 的和 再向上取整
//         const lastPage=Math.ceil((total.value+1) / params.value.pagesize)
//         params.value.pagenum=lastPage //更新成当前页码
//     }
//     getArticleList()
// }




// 定义计算属性来随时检测楼宇名的变化 楼宇change事件 
const onBuildingChange = (value) => {
    formModel.value.unit = '';  // 清空当前选中的单元
    getUnitsByBuilding(value);
};

const getUnitsByBuilding = async (building) => {
    try {
        // 替换为实际的 API 调用
        const res = await filterDanyuan(building);
        louyumodels.value = res.data.data.map(item=>{
            return item.unit_number
        }); // 更新单元数据
        console.log(louyumodels.value );
    } catch (error) {
        ElMessage.error('获取单元数据失败');
    }
};

// 格式化平方m2
const formatArea=(area)=>{
    return `${parseFloat(area).toFixed(0)} m²`
}

</script>

<template>

      <page-container title="">
        
        <template #extra>
            <el-button type="primary" @click="onAddAritcle">添加房屋</el-button>
        </template>

        <!-- 表格区域 articleList = 数据源  -->
        <el-table :data="HouseList" v-loading="loading">
            <el-table-column type="index" width="100"  label="编号" />

            <el-table-column label="房号" prop="roomnumber" >
                <template #default="{row}">
                    {{ row.house_number }}
                </template>
            </el-table-column>

            <el-table-column label="楼宇名称" prop="building" >
                <template #default="{row}">
                    {{ row.building }}
                </template>
            </el-table-column>

            <el-table-column label="单元名称" prop="element" >
                <template #default="{row}">
                    {{ row.unit }}
                </template>
            </el-table-column>

            <el-table-column label="楼层" prop="tierlimitL" width="120">
                <template #default="{row}">
                    {{ (row.floor)+'楼' }}
                </template>
            </el-table-column>

            <el-table-column label="面积" prop="area" >
                <template #default="{row}">
                    {{ formatArea(row.area) }}
                </template>
            </el-table-column>

            <el-table-column label="房主姓名" prop="user" >
                <template #default="{row}">
                    {{ row.owner_name }}
                </template>
            </el-table-column>

            <el-table-column label="联系方式" prop="information" >
                <template #default="{row}">
                    {{ row.contact_info }}
                </template>
            </el-table-column>

            <el-table-column label="备注" prop="beizhu" >
                <template #default="{row}">
                    {{ row.remarks || '无' }}
                </template>
            </el-table-column>
            
            <el-table-column label="操作"  width="190">
                <template #default="{row}">
                    <el-button circle type="primary" plain :icon="Edit" @click="onEditArticle(row)"></el-button>
                    <el-button circle type="danger" plain :icon="Delete" @click="onDeleteArticle(row)"></el-button>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页区域 -->
        <el-pagination
            v-model:current-page="params.page"  
            v-model:page-size="params.perPage"
            :page-sizes="[1, 2, 3, 4]"
             :disabled="false"
            :background="true"
            layout="total,  prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 20px; justify-content: flex-end;"
        />
        </page-container>

    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" :title="!isDialog ? '添加房屋':'编辑房屋'" width="30%">
        <el-form :model="formModel" :rules="rules" ref="formRef"  label-width="80px" label-position="left">

            <el-form-item label="楼宇名" prop="building">
                <!-- 这个@change="onBuildingChange"事件实时 -->
                <el-select v-model="formModel.building" placeholder="楼宇名称" @change="onBuildingChange" >
                    <el-option v-for="item in useStore.LouYu" :key="item.id"  :label="item. building_number" :value="item.building_number" />
                 </el-select>
            </el-form-item>

            <el-form-item label="单元名" prop="unit">
                 <el-select v-model="formModel.unit" placeholder="请选择单元名称" >
                    <el-option v-for="item in louyumodels" :key="item.id"  :label="item" :value="item" />
                 </el-select>
            </el-form-item>

            <!-- 这里是用select选择器来进行的 -->
            <el-form-item label="楼层" prop="floor">
                <el-input-number v-model="formModel.floor" :min="1" :max="50"/>
            </el-form-item>

            <el-form-item label="房号" prop="house_number">
                <el-input v-model="formModel.house_number" placeholder="请输入房号"></el-input>
            </el-form-item>

            <el-form-item label="业主姓名" prop="owner_name">
                <el-input v-model="formModel.owner_name" placeholder="请输入业主姓名"></el-input>
            </el-form-item>

            <el-form-item label="联系方式" prop="contact_info">
                <el-input v-model="formModel.contact_info" placeholder="请输入联系方式"></el-input>
            </el-form-item>

            <el-form-item label="面积" prop="area">
                <el-input v-model="formModel.area" placeholder="请输入面积"></el-input>
            </el-form-item>

            <el-form-item label="备注" prop="remarks">
                <el-input v-model="formModel.remarks" placeholder="请输入备注"></el-input>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">
                确认
                </el-button>
            </span>
        </template>

    </el-dialog>

</template>

<style lang="scss" scoped>

</style>